<script>
import ControlALLList from "./controlall";
import {selectAllLabel,getDevicePic} from '@/api/device/device'
import {getAlgorLabel,startAlgor} from '@/api/algor/algor'
import {getOneAlgorCon,updateAlgorCon} from '@/api/algor/algorcon'

export default {
  name: "index",
  created() {
    this.algorLable();
    this.getDicts("warm_type").then(response => {
      this.warmList = response.data;
    });
  },
  data(){
    return{
      queryParams:{pageSize:10,pageNum:1},
      resetOff:0,
      warmList:[],
      deviceList:[],
      algorList:[],
      algorinput:'',
      activeName: 'all',
      formdialog:{
        open: false,
        title: '新建任务',
        isUpdate:false,
      },
      form:{},
      AddFormdialogVisible:false,
      AddForm:{
      },
      rules:{
          jobName: [
            { required: true, message: '布控名称不能为空', trigger: 'blur' },
          ],
          jobTime: [
            { required: true, message: '布控时间不能为空', trigger: 'blur' },
          ],
          deviceId: [
            { required: true, message: '布控设备不能为空', trigger: 'blur' },
          ],
        algorTypes: [
            { required: true, message: '算法类型不能为空', trigger: 'blur' },
          ],
         algorType: [
          { required: false, message: '算法类型不能为空', trigger: 'blur' },
        ],

        threshold: [
          { required: true, message: '算法阈值不能为空', trigger: 'blur' },
        ]
      },
      controltype: [],
      formLabelWidth:'100px',
      active:1,
      picsrc:''
    }
  },
  methods: {
    handleEnter() {
      alert('回车键被按下了！');
    },
    getR(){
      return Math.floor(Math.random() * 100000) + 1;
    },
    getList(e){
      this.resetOff = this.getR();
      // this.getShopList(); //搜索按钮的回调
      this.$refs.controlall.searchalgor();
    },
    resetQuery(){
      this.queryParams = {pageSize:10,pageNum:1};
      this.getList();
    },
    getDevicePic(val){
      console.log(val)
      const  deviceList = this.deviceList;
      for (let dev  of  deviceList){
        if (dev.channelId === val){
          console.log(dev.name)
          this.AddForm.deviceName = dev.name
        }
      }
    },
    getDeviceLabel(){
      selectAllLabel().then(resp=>{
        this.deviceList = resp.data
      })
    },
    algorLable(){
      getAlgorLabel().then(resp=>{
        console.log(resp.data)
        this.algorList = resp.data
      })
    },
    submitJob(){
      if (this.AddForm.jobId == null){
        this.AddForm.algorType = 'xx'
      }
      this.$refs["form"].validate(valid => {
        if (valid){
          if (this.AddForm.jobId){
            console.log("修改")
            updateAlgorCon(this.AddForm).then(resp=>{
              this.$model.msgSuccess("修改成功");
              this.formdialog.open = false;
              this.resetOff = this.getR();
            })
          }else {
            console.log("新增")
            console.log(this.AddForm)
            startAlgor(this.AddForm).then(resp=>{
              this.$model.msgSuccess("添加成功");
              this.formdialog.open = false;
              this.resetOff = this.getR();
            })
          }
        }
      })

    },
    resetActive(){
      this.active = 1
    },
    openAddDialog(){
      this.form = {};
      this.AddForm = {};
      this.getDeviceLabel();
      this.algorLable();
      this.resetActive();
      this.formdialog.title = '添加布控';
      this.formdialog.isUpdate = false;
      this.formdialog.open = true;
    },
    updateRow(row){
      let jobId = row.jobId;

      getOneAlgorCon(jobId).then(resp=>{
        this.AddForm = resp.data;
        this.AddForm.algorTypes = ['xx']
        this.getDeviceLabel();
        this.algorLable();
        this.resetActive();
        this.formdialog.title = '修改布控';
        this.formdialog.isUpdate = true;
        this.formdialog.open = true;
      })
    },
    // 步骤条下一步的方法
    next() {
      if (this.active++ > 2) this.active = 1
    },
     // 步骤条上一步的方法
    pre() {
      if (this.active-- < 2) this.active = 1
    },
      // 标签页
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
  },
  components:{
    ControlALLList
  }

}
</script>

<template>
  <div id="app-algor">
    <!-- <p>算法模块</p> -->
     <!-- 面包屑 -->
     <el-row>
      <el-col :span="23" :offset="1" style="margin-bottom: 30px;margin-top: 20px;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/algor' }" class="bread"><i class="el-icon-location-outline"></i>算法管理</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/control' }" class="bread">算法布控</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <!-- 搜索表单 -->
    <el-row style="margin-bottom:15px">
      <el-col :span="5" :offset="2">
        <el-button class="butter" round size="mini" @click="openAddDialog()"><i class="el-icon-plus"></i>&ensp;新建任务</el-button>
      </el-col>
<!--      <el-col :span="3"  :offset="13" class="inputbox">-->
<!--          <el-input placeholder="请输入布控名称" v-model="algorinput" size="mini" class="inputem" clearable>-->
<!--            <template slot="append"><i class="el-icon-search"></i></template>-->
<!--          </el-input>-->
<!--      </el-col>-->
      <el-col :span="13">
        <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true"  label-width="68px" class="formselect">
          <el-form-item label="布控名称" prop="jobName">
            <el-input

            class="inputem"
                v-model="queryParams.jobName"
                placeholder="请输入布控名称"
                clearable
                style="width: 180px"
                @keyup.enter.native="getList"
            />
          </el-form-item>
          <el-form-item label="算法类型" prop="algorType">
            <el-select class="inputem" v-model="queryParams.algorType"  placeholder="请选择算法类型" clearable style="width: 180px">
              <el-option
                  v-for="item in algorList"
                  :key="item.algorId"
                  :label="item.algorName"
                  :value="item.algorId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button class="butter" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
            <el-button class="butter" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    <!-- 标签页 -->
    </el-row>
    <el-row type="flex" justify="center">
      <el-col>
        <el-tabs class="tabs-con"  v-model="activeName" @tab-click="handleClick" stretch>
          <el-tab-pane label="全部" name="all">
          </el-tab-pane>
          <el-tab-pane label="布控中" name="ing">
          </el-tab-pane>
          <el-tab-pane label="已暂停" name="stop">
          </el-tab-pane>
          <ControlALLList ref="controlall" :job-status="activeName" :query-param="queryParams" :reset-off="resetOff" @update-row="updateRow"></ControlALLList>
        </el-tabs>
      </el-col>
    </el-row>

    <!-- 添加布控任务dialog -->
    <el-dialog :title="formdialog.title" :visible.sync="formdialog.open"  :append-to-body="true">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="添加任务" />
<!--        <el-step title="选择目标库" />-->
        <el-step title="配置参数" />
      </el-steps>
      <el-row>
      <el-form :model="AddForm" :rules="rules" ref="form">
        <div v-show="active == 1" class="stepbox1">
          <el-col :span="12" :offset="4">
            <el-form-item label="布控名称：" :label-width="formLabelWidth" prop="jobName">
            <el-input class="inputem" v-model="AddForm.jobName" ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="4">
            <el-form-item label="布控时间：" :label-width="formLabelWidth" prop="jobTime">
              <el-time-picker
                  is-range
                  arrow-control
                  v-model="AddForm.jobTime"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
              </el-time-picker>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12" :offset="4">-->
<!--            <el-form-item label="状态：" :label-width="formLabelWidth" prop="jobStatus">-->
<!--              <el-switch class="inputem" v-model="AddForm.jobStatus" active-color="#4589BE" active-value=0 inactive-value=1 inactive-color="#C4CFD4"></el-switch>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </div>
        <div v-show="active == 2" class="stepbox3">
          <el-col :span="12">
            <el-form-item label="布控设备：" :label-width="formLabelWidth" prop="deviceId">
              <el-select
                  class="inputem"
                  v-model="AddForm.deviceId"
                  placeholder="布控设备"
                  clearable
                  @change="getDevicePic"
                  style="width: 240px"
              >
                <el-option
                    v-for="dict in deviceList"
                    :key="dict.channelId"
                    :label="dict.name"
                    :value="dict.channelId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="跳帧：" :label-width="formLabelWidth" prop="skip">
              <el-input-number class="inputem" v-model="AddForm.skip" :precision="2" :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预警间隔：" :label-width="formLabelWidth" prop="warmInt" title="预警间隔值在设定范围内只报警一次">
              <el-input-number class="inputem" v-model="AddForm.warmInt" :precision="2"  :min="1" :max="10"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="算法阈值：" :label-width="formLabelWidth" prop="threshold" >
              <el-input-number class="inputem" v-model="AddForm.threshold" :precision="2"  :min="0" ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="告警级别：" :label-width="formLabelWidth" prop="warnlevel">
              <el-select class="inputem" v-model="AddForm.warnlevel" placeholder="请选择告警级别">
                <el-option
                    v-for="dict in warmList"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <div>
            <el-col :span="12" v-show="!formdialog.isUpdate">
              <el-form-item label="算法类型：" :label-width="formLabelWidth" prop="algorTypes">
                <el-select class="inputem" v-model="AddForm.algorTypes" :multiple=true placeholder="请选择">
                  <el-option
                      v-for="item in algorList"
                      :key="item.algorId"
                      :label="item.algorName"
                      :value="item.algorId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          <!--     修改时候出现       -->
            <el-col :span="12" v-show="formdialog.isUpdate">
              <el-form-item label="算法类型：" :label-width="formLabelWidth" prop="algorType">
                <el-select class="inputem" v-model="AddForm.algorType"  placeholder="请选择">
                  <el-option
                      v-for="item in algorList"
                      :key="item.algorId"
                      :label="item.algorName"
                      :value="item.algorId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </div>

<!--          <el-col :span="12">-->
<!--            <el-form-item label="ROI区域：" :label-width="formLabelWidth" >-->
<!--              <el-popover placement="top" trigger="click">-->
<!--                <img :src= "picsrc" alt="请选择布控设备" style="width: 500px;height: 400px">-->
<!--                <img slot="reference" alt="请选择布控设备" :src="picsrc" style="width: 100px;height: 100px">-->
<!--              </el-popover>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </div>
      </el-form>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formdialog.open = false" plain>取 消</el-button>
        <el-button v-if="active > 1" style="margin-top: 12px" @click="pre" plain>上一步</el-button>
        <el-button v-if="active < 2" style="margin-top: 12px" @click="next" plain>下一步</el-button>
        <el-button @click="submitJob" plain>确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<style scoped>
.tabs-con{
  position: relative;
  z-index: 0; /* 确保 tabs 不是最顶层 */
}
.bread /deep/ .el-breadcrumb__inner{
  color: #000000;
}
.bread /deep/ .el-breadcrumb__inner:hover{color: #000000;}
.el-button{
  background-color: #4686D0;
  color: #ffffff;
  border: #4686D0;
  font-size: 12px;
  font-family: "微软雅黑";
}
.el-row{
  margin-top: 10px;
  /* margin-bottom:20px; */
}
.formselect /deep/ .el-form-item{
  margin-right: 30px;
}
.formselect /deep/ .el-form-item__label{
  color: #000000;
}
.el-input{
  width:250px;
}
.inputem /deep/ .el-input__inner {
  background-color: rgba(0, 0, 0, 0) ;
  border:1px solid #B1B4C5;
}
.inputem /deep/ .el-input__inner:focus{
  border:2px solid #4c87c2;
}
.inputem /deep/ .el-input__inner:hover{
  border:2px solid #4c87c2;
}

.inputem /deep/ .el-input-group__append{
  background-color: #265389;
  border:1px solid #265389;
}
.el-icon-search{
  color: #ffffff;
}
::v-deep .el-tabs__header{
 margin: 0px;
}
::v-deep .el-tabs__nav-scroll{
	width:20%;
	margin:0 auto;
}
::v-deep .el-tabs__item {
 color:#000000;
}
::v-deep .el-tabs__item.is-active {
 color: #31A1F9;
}

::v-deep .el-tabs__nav-wrap::after{
 height:1px;
 background-color: #265389;
}
.stepbox1, .stepbox2, .stepbox3{
 margin-top: 30px;
 width: 900px;
 height: 250px;
}


</style>
